<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>球</title>
</head>
    <style>
        .box{
            transform-style: preserve-3d;
            perspective: 300px;
        }
        @keyframes a{
            100%{
                transform: rotateX(0deg) rotateY(360deg) ;
            }
        }
        #wrapper{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            border: 1px solid #f00;
            box-sizing: border-box;
            position: relative;
            transform: rotateX(0deg) rotateY(0deg);
            animation: a 5s linear infinite;
            margin: 0 auto;
        }
        @keyframes b{
            transform:rotateY(360deg);
        }
        #wrapper div{
            width: 15px;
            height: 15px;
            background: #f00;
            position: absolute;
            top:60px;
            left: 85px;
            animation: b 10s linear infinite;
        }
    </style>
<body>
   <div class="box">
           <div id='wrapper'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
   </div>

</body>
    <script>
        var wrapper = document.getElementById('wrapper');
        var divs = wrapper.getElementsByTagName('div');
        console.log(divs.length);
        for(var i = 0,max = divs.length;i<max;i++){
            if(i<=35){
                divs[i].style.top = '85px';
                divs[i].style.left = '85px';
                divs[i].style.transform = 'rotateY('+(360/36)*i+'deg) translateZ(100px) rotateX(10deg)';
            }
            else if(i>35&&i<=71){
                divs[i].style.top = '50px';
                divs[i].style.left = '85px';
                divs[i].style.transform = 'rotateY('+(360/36)*i+'deg) translateZ(70px) rotateX(10deg)';
            }
            else if(i>71&&i<=108){
                divs[i].style.top = '120px';
                divs[i].style.left = '85px';
                divs[i].style.transform = 'rotateY('+(-360/36)*i+'deg) translateZ(70px) rotateX(10deg)';
            }
             else if(i>108&&i<=123){
                divs[i].style.top = '30px';
                divs[i].style.left = '85px';
                divs[i].style.transform = 'rotateY('+(360/16)*i+'deg) translateZ(40px) rotateX(10deg)';
                 console.log(1);
            }
            else if(i>123){
                divs[i].style.top = '150px';
                divs[i].style.left = '85px';
                divs[i].style.transform = 'rotateY('+(-360/16)*i+'deg) translateZ(40px) rotateX(10deg)';
            }
            
            
        }
    </script>
</html>